import React from "react";
import { Breadcrumb, Layout } from "antd";
import { useRoutes, useLocation } from "react-router-dom";
import usePath from "@/hooks/usePath";
import { useAccess } from "@/access";
import { useCallback } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./index.less";
const { Content } = Layout;
export default () => {
  const { routes } = useAccess();
  const [currentMenu] = usePath();
  const navigation = useNavigate();
  const { pathname } = useLocation();

  const element = useRoutes(routes);
  const onClickBreadcrumbItem = useCallback(
    (item) => {
      if (item?.router && pathname !== item?.router) {
        navigation(item?.router);
      }
    },
    [navigation]
  );
  return (
    <Content style={{ margin: "0 16px" }}>
      <Breadcrumb style={{ margin: "16px 0" }}>
        {currentMenu.map((item) => (
          <Breadcrumb.Item
            className={item?.router ? styles.pointer : ""}
            onClick={() => onClickBreadcrumbItem(item)}
          >
            {item?.name}
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
      <div style={{ padding: 24, minHeight: 360, background: "#fff" }}>
        {element}
      </div>
    </Content>
  );
};
